<template>
    <div class="chat-message">
        <!-- 消息列表 -->
        <div v-for="(message, index) in messageList" :key="index" 
             :class="[
                message.role === 'user' ? 'user-message' : 'assistant-message',
                message.role === 'assistant' && message.data ? 'full-width-message' : ''
             ]">
            <div :class="message.role === 'user' ? 'user-mark-text' : 'assistant-mark-text'">
                <div v-if="message.role === 'assistant'" v-html="formatAssistantMessage(message.content)"></div>
                <div v-else>
                    <p v-if="message.content">{{ message.content }}</p>
                    <!-- 显示用户发送的图片 -->
                    <div v-if="message.images && message.images.length > 0" class="user-images">
                        <img 
                            v-for="(imageUrl, imgIndex) in message.images" 
                            :key="imgIndex"
                            :src="imageUrl" 
                            alt="用户上传的图片"
                            class="user-image"
                            @error="handleImageError"
                        />
                    </div>
                </div>
                <!-- 显示助手的工具调用结果 -->
                <template v-if="message.role === 'assistant' && message.data">
                    <div v-if="message.data.tool === 'trainTicket'" class="tool-result">
                        <h4>火车票查询结果</h4>
                        <queryTrainTickets v-if="message.data.success" :tickets="message.data.data"></queryTrainTickets>
                        <p v-else class="error-message">{{ message.data.message }}</p>
                    </div>
                    <div v-else-if="message.data.tool === 'weather'" class="tool-result">
                        <h4>天气查询结果</h4>
                        <weather v-if="message.data.success" :weather="message.data.data"></weather>
                        <p v-else class="error-message">{{ message.data.message }}</p>
                    </div>
                </template>
            </div>
        </div>
        
        <!-- 加载状态 -->
        <div v-if="isLoading" class="assistant-message">
            <div class="assistant-mark-text">
                <loadIng />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
// loading加载
import loadIng from '@/page/component/loadIng.vue'
// 火车票查询组件
import queryTrainTickets from '@/page/tools/queryTrainTickets.vue'
// 天气查询组件
import weather from '@/page/tools/weather.vue'

// 定义消息类型
interface Message {
  role: 'user' | 'assistant'
  content: string
  data?: any
  images?: string[] // 用户消息可能包含的图片URL数组
}

// 消息列表
const messageList = ref<Message[]>([
  {
    role: 'assistant',
    content: '你好！我是小游匣，请问有什么可以帮助你的旅行需求吗？'
  }
]);

// 是否正在加载
const isLoading = ref(false);

// 添加用户消息到列表
const addUserMessage = (content: string, images?: string[]) => {
  console.log('添加用户消息:', content, '图片数量:', images?.length || 0, '当前消息数量:', messageList.value.length);
  messageList.value.push({
    role: 'user',
    content,
    images
  });
  console.log('添加用户消息后，消息数量:', messageList.value.length);
  // 滚动到底部
  scrollToBottom();
};

// 添加助手消息到列表
const addAssistantMessage = (content: string, data?: any) => {
  console.log('添加助手消息:', content, '当前消息数量:', messageList.value.length);
  messageList.value.push({
    role: 'assistant',
    content,
    data
  });
  console.log('添加助手消息后，消息数量:', messageList.value.length);
  console.log('当前消息列表:', messageList.value.map((m, i) => `${i}: ${m.role} - ${m.content.substring(0, 20)}...`));
  // 滚动到底部
  scrollToBottom();
};

// 更新助手消息内容
const updateAssistantMessage = (index: number, newContent: string, newData?: any) => {
  console.log('更新助手消息:', index, '新内容长度:', newContent.length);
  if (index >= 0 && index < messageList.value.length) {
    // 直接修改对象属性
    messageList.value[index].content = newContent;
    if (newData !== undefined) {
      messageList.value[index].data = newData;
    }
    // 强制触发响应式更新
    messageList.value = [...messageList.value];
    // 滚动到底部
    scrollToBottom();
  } else {
    console.error('无效的消息索引:', index, '消息列表长度:', messageList.value.length);
  }
};

// 滚动到底部
const scrollToBottom = () => {
  setTimeout(() => {
    const chatContainer = document.querySelector('.chat-message');
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  }, 100);
};

// 设置加载状态
const setLoading = (loading: boolean) => {
  isLoading.value = loading;
};

// 暴露方法给父组件
// 获取消息数量的方法
const getMessageCount = () => {
  return messageList.value.length;
};

// 格式化助手消息，处理换行和列表
const formatAssistantMessage = (content: string) => {
  if (!content) return '';
  
  let formatted = content;
  
  // 移除所有星号和井号符号
  formatted = formatted.replace(/[\*#]+/g, '');
  
  // 处理'-'符号开头的列表项（换行显示）
  formatted = formatted.replace(/\s*-\s*/g, '<br/>• ');
  
  // 处理数字列表（换行显示）
  formatted = formatted.replace(/\s*(\d+\.\s*)/g, '<br/>$1');
  
  // 处理中文句号、感叹号、问号后的换行
  formatted = formatted.replace(/([。！？])\s*([^\s<])/g, '$1<br/>$2');
  
  // 处理英文句号、感叹号、问号后的换行（但不影响数字）
  formatted = formatted.replace(/([.!?])\s+([A-Z])/g, '$1<br/>$2');
  
  // 处理冒号后的换行（如"Day 1:"）
  formatted = formatted.replace(/([：:])\s*([A-Za-z\u4e00-\u9fa5])/g, '$1<br/>$2');
  
  // 处理表情符号后的换行
  formatted = formatted.replace(/([\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}])\s*/gu, '$1<br/>');
  
  // 清理开头的<br/>标签
  formatted = formatted.replace(/^<br\/>+/, '');
  
  // 清理连续的<br/>标签，最多保留两个
  formatted = formatted.replace(/(<br\/>){3,}/g, '<br/><br/>');
  
  // 清理多余的空白
  formatted = formatted.replace(/\s+/g, ' ').trim();
  
  return formatted;
};

// 处理图片加载错误
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement;
  console.error('图片加载失败:', img.src);
  img.style.display = 'none';
};

defineExpose({
  addUserMessage,
  addAssistantMessage,
  setLoading,
  updateAssistantMessage,
  getMessageCount
});

// 提供messageList的依赖注入，供inputArea使用
provide('messageList', messageList);

// 组件挂载后滚动到底部
onMounted(() => {
  scrollToBottom();
});
</script>

<style scoped lang="less"> 
    .chat-message{
        display: flex;
        flex-direction: column;
        .user-message{
            margin-top: 10px;
            max-width: 70%;
            align-self: flex-end;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.5s ease-in-out forwards;
            
            .user-mark-text {
                background-color: #61a8f9;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                color: #fff;
                padding: 5px;
                
                p{
                    line-height: 1.5;
                    margin: 0;
                }
                
                .user-images {
                    margin-top: 5px;
                    
                    .user-image {
                        max-width: 200px;
                        max-height: 200px;
                        border-radius: 8px;
                        margin-bottom: 5px;
                        display: block;
                        object-fit: cover;
                    }
                }
            }
        }
    }
    .send-image{
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.5s ease-in-out forwards;
        .van-image{
            align-self: flex-end;
            margin-top: 5px;
        }
    }
    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
             opacity: 1;
             transform: translateY(0);
        }
    }
    .assistant-message{
        margin-top: 15px;
        align-self: flex-start;
        
        &.full-width-message {
            width: 100%;
            max-width: 100%;
            align-self: stretch;
        }
        
        .assistant-mark-text{
            font-size: 16px;
            line-height: 1.2;
            background-color: #fff;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
            color: #333;
            padding: 10px;
            
            // 格式化消息的样式
            div {
                white-space: normal;
                word-wrap: break-word;
                line-height: 1.6;
                
                // 列表项样式
                :deep(.list-item) {
                    display: block;
                    margin-top: 8px;
                    margin-bottom: 4px;
                }
                
                // 处理HTML换行标签
                :deep(br) {
                    line-height: 1.8;
                }
            }
            
            // 普通段落样式
            p {
                line-height: 1.2;
                margin: 0;
            }
            
            // 工具结果样式
            .tool-result {
                width: 100%;
                
                h4 {
                    margin: 0 0 10px 0;
                    font-size: 16px;
                    color: #333;
                }
                
                .error-message {
                    color: #ff4d4f;
                    margin: 0;
                }
            }
        }
    }

</style>